<script setup lang="ts">



import { LaYoutAPI } from "@/apis/user";
import { useUserStore } from "@/stores/user";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, ref } from "vue";

import { useRouter } from "vue-router";


const router = useRouter();
const store = useUserStore();

const username = ref('')
// 点击退出登录
const onLogout = () => {
  // 确认弹窗
  ElMessageBox.confirm(
    // 内容
    "确定退出登录吗？",
    // 标题
    "提示",
    {
      confirmButtonText: "确定", // 确定按钮文案
      cancelButtonText: "取消", // 取消按钮文案
      type: "warning", // 图标类型
    }
  )
    .then(() => {
      store.clearToken();
      router.push("/login");
      ElMessage.success("退出成功");
    })
    .catch(() => {});
};

onMounted(async()=>{
  const res =  await LaYoutAPI()
  // console.log(res)
  username.value = res.data.name
})



</script>

<template>
  <!-- 结构 -->
  <el-container class="my-layout">
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <el-menu
        :default-active="$route.path"
        background-color="#023"
        text-color="#fff"
        active-text-color="#409EFF"
        style="border-right: none"
        router
      >
        <img width="100%" src="@/assets/images/logo.png" alt="" />
        <el-menu-item index="/">
          <el-icon>
            <HomeFilled />
          </el-icon>
          <span>数据概览</span>
          <!-- <span slot="title"></span> -->
        </el-menu-item>
        <el-menu-item index="/article">
          <el-icon>
            <Document />
          </el-icon>
          <span>内容管理</span>
        </el-menu-item>

        <el-menu-item index="/publish">
          <el-icon>
            <Promotion />
          </el-icon>
          <span>发布文章</span>
        </el-menu-item>
        <!-- <el-menu-item index="/profile">
          <i class="el-icon-user"></i>个人中心
           <span slot="title"></span>
        </el-menu-item> -->
      </el-menu>
    </el-aside>
    <!-- flex 容器，如果子元素中为 el-header 或 el-footer 时为 vertical -->
    <el-container>
      <!-- 头部 -->
      <el-header>
        <span class="username">{{ username }}</span>
        <el-link :underline="false" icon="el-icon-unlock" @click="onLogout()"
          >退出</el-link
        >
      </el-header>
      <!-- 主体 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
/* 样式 */
.my-layout {
  /* 1vw 视口宽度的 1% */
  /* 1vh 视口高度的 1% */
  height: 100vh;
}
.el-aside {
  background-color: #000d1f;
}
.el-header {
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 10px;
}
.profile {
  cursor: pointer;
}
</style>
